<template>
	<view class="content">
		<view class="" style="border-radius: 20rpx;background-color: #fff;">
			<view class="contentBox">
				<p>商品评价</p>
				<uni-rate v-model="form.commentCommodity" />
			</view>
			<view class="contentBox">
				<p>物流评价</p>
				<uni-rate v-model="form.courierService" />
			</view>
			<view class="contentBox">
				<p>服务评价</p>
				<uni-rate v-model="form.shopServiceAttitude" />
			</view>
		</view>
		<view class="" style="border-radius: 20rpx;background-color: #fff;">
			<view class="contentBox" style="margin-top: 40rpx;">
				<p>评论</p>
				<textarea v-model="form.evaluationContent" placeholder="请输入评论" />
			</view>
			<view class="contentBox">
				<p>评论图片</p>
				<view class="" style="width: 76%;">
					<image class="upImg" v-for="(item,index) in form.pictureIntegrations" @click="chooseImage"
						:src="item.pictureUrl" mode=""></image>
					<view class="upImg" @click="chooseImage">
						<image src="@/static/myImages/upImg.png" mode=""></image>
						<p>上传图片</p>
					</view>

				</view>
			</view>
		</view>
		<view class="button" @click="submit">
			发表评论
		</view>
	</view>
</template>

<script>
	import {
		getUserInfo
	} from '@/api/user.js';

	import {
		addEvaluate
	} from '@/api/goods.js';
	import uploadImage from '@/js_sdk/yushijie-ossutil/ossutil/uploadFile.js';

	export default {
		data() {
			return {
				form: {
					type: '0',
					userId: '',
					commodityId: '',
					orderId: '',
					commentCommodity: '',
					courierService: '',
					shopServiceAttitude: '',
					evaluationContent: '',
					pictureIntegrations: []
				},

			}
		},
		onLoad(options) {
			this.form.commodityId = options.commodityId
			this.form.orderId = options.orderId
			this.getUser()
		},
		methods: {
			getUser() {
				getUserInfo().then(res => {
					this.form.userId = res.data.id
				})
			},
			submit() {
				console.log(this.form, "form")
				addEvaluate(this.form).then(res => {
					uni.showToast({
						title: '评论成功',
						icon: 'none'
					});
					uni.navigateBack({
						delta: 1 // 返回上一级页面
					});
				})
			},
			//上传
			chooseImage() {
				uni.chooseImage({
					count: 9 - this.form.pictureIntegrations.length, // 最多可以选择的数量
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						tempFilePaths.forEach((tempFilePath, index) => {
							// 在这里我们保存临时路径和对应的索引
							let uploadIndex = this.form.pictureIntegrations.length + index;
							this.uploadImage(tempFilePath, uploadIndex);
						});
					},
					fail: (err) => {
						uni.showToast({
							title: '选择图片失败',
							icon: 'none'
						});
					}
				});
			},
			uploadImage(filePath, uploadIndex) {
				uploadImage(filePath, 'avatars/', (url) => {
					console.log(url, "url");
					uni.showToast({
						title: '上传成功',
					});

					// 使用 uploadIndex 更新 pictureIntegrations 数组
					this.$nextTick(() => { // 确保 DOM 更新完成
						this.form.pictureIntegrations.push({
							pictureUrl: url,
							sort: uploadIndex + 1
						}); // 注意这里的 sort 是从1开始的
					});
				}, (error) => {
					uni.showToast({
						title: '图片上传失败: ' + error.message,
					});
					console.error('Error uploading image:', error);
				});
			},

			removeImage(index) {
				this.form.pictureIntegrations.splice(index, 1);
			},

		}
	};
</script>
<style lang="scss">
	@import '@/uni.scss';

	.content {
		min-height: 100vh;
		background-color: #F3F3F3;
		padding: 20rpx;
	}

	.contentBox {
		padding: 20rpx;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		font-weight: bold;

		p {
			width: 140rpx;
			font-size: 28rpx;
			line-height: 52rpx;
		}

		textarea {
			width: 76%;
			padding: 10rpx;
			font-size: 28rpx;
			font-weight: 100;
			background-color: #f3f3f3;
		}

		.upImg {
			width: 140rpx;
			height: 140rpx;
			border-radius: 10rpx;
			border: 2rpx solid #D6D6D6;
			margin-top: 20rpx;
			font-weight: 400;
			font-size: 26rpx;
			color: #999999;
			text-align: center;

			image {
				width: 42rpx;
				height: 38rpx;
				margin-top: 28rpx;
			}
		}
	}

	.button {
		width: 80%;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 80rpx;
		text-align: center;
		color: #F3F3F3;
		background-color: $uni-bg-color-orange;
		margin: 200rpx auto;
	}
</style>